<template>
<div class="spread con sale_index">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/brand' }">Homepage</el-breadcrumb-item>
			<el-breadcrumb-item>Add New Part</el-breadcrumb-item>
		</el-breadcrumb>
	<div class="style_detail">
					
		<el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="150px" style="width:100%;">
		 <el-row class="good_detail">
			 			 
			 <div class="canEdit">
				 <el-form-item label="BrandName" prop="BrandName" >
				   <el-input v-model="ruleForm.BrandName"  placeholder="BrandName"></el-input>
				 </el-form-item>
				 <el-form-item label="BrandAlias" prop="BrandAlias">
				   <el-input v-model="ruleForm.BrandAlias"  placeholder="BrandAlias"></el-input>
				 </el-form-item>
				 
				<el-form-item label="BrandUrl" prop="BrandUrl" >
				   <el-input v-model="ruleForm.BrandUrl"  placeholder="BrandUrl"></el-input>
				 </el-form-item>
				 <el-form-item label="BrandDesc" prop="BrandDesc">
				   <el-input v-model="ruleForm.BrandDesc"  placeholder="BrandDesc"></el-input>
				 </el-form-item>
				 
			 </div>
		  </el-row>
		  
		  <el-form-item class="submit">
		    <el-button type="primary" @click="submitForm('ruleForm')">Save</el-button>
		    <el-button @click="resetForm('ruleForm')">Cancel</el-button>
		  </el-form-item>
		</el-form>	
		  </div>
	</div>
</template>

<script type="text/javascript">
	import E from 'wangeditor'
	import 'wangeditor/release/wangEditor.min.css'
	export default{
		data(){
			return{
				max:20,
				ruleForm: {
			        BrandName: '',
					BrandAlias:'',
					BrandUrl:'',
					BrandDesc:'',
			     },
				arr:[],
				dialogImageUrl: '',
				dialogVisible: false,
				phoneEditor:null,
				
				rules: {
          			 BrandName: [
				            { required: true, message: 'Please enter BrandName', trigger: 'blur' },
				            { min: 3, max: 55, message: '长度在 3 到 55 个字符', trigger: 'blur' }
				            ],
				     BrandAlias: [
				             { required: true, message: 'Please enter BrandAlias', trigger: 'blur' },
				            { min: 3, max: 55, message: '长度在 3 到 55 个字符', trigger: 'blur' }
				          ],
			        
         		 },
			}
          
		},
		mounted () {
		   
	    },
		created(){
				
		},
		methods:{
			  submitForm(formName) {
		        this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	axios.post('/api/customer/brandadd',{
		          		param:this.ruleForm, 
		          		
		          	} )
					.then(result => {
						if (result.data.code == 200) {
						this.$notify.success({
							title: 'Success',
							message: result.data.message
						});
						
					} else {
						this.$notify.error({
							title: 'Fail',
							message: result.data.message
						});
					}
						
					})
					.catch(error => {
						this.$message.error({
						title: 'Fail',
						message: 'Please enter '
					});
					})
		          } else {
		            this.$message.error({
						title: 'Fail',
						message: 'Please enter *'
					});
		            return false;
		          }
		        });
		      },
		      resetForm(formName) {
		        this.$refs[formName].resetFields();
		      }, 
		      
		
		handlePreview(file) {
			//console.log(this.goods.detailPic);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`);
		},
		successEvent(file){
		    	this.img_url_1.push({name:file.result,url:file.result});
		    },
		handleClose(obj) {
			this.dialogVisible = false;
		},
		filterMethod(query, item) {
			return item;
		}
			
		}
	}
</script>

<style lang="scss" >
	.style_detail{
		input[type=file] {
		    display: none;
		}
		.submit{
			margin-top: 30px;
		}
		
		.good_detail{
			.time1{
				width: 100%;
				clear: left;
				.demonstration{
					display: inline-block;
					width: 186px;
					text-align: right;
					padding-right: 8px;
					font-size: 14px;
					font-weight: 600;
					color: #606266;
				}
			}
			.el-select .el-input {
				    width: 210px;
				}
			.detailReadOnly{
				float: left;
				overflow: hidden;
				    margin-bottom: 15px;
				.item-detail{
					margin-top: 10px;
					margin-bottom: 10px;
				}
				.underline{
					.el-input__inner{
						border: 0;
						border-bottom: 1px solid #DCDFE6;
						border-radius: 0;
					}
				}
			}
			.canEdit{
				float: left;
				width: 100%;
				.el-input__inner{
					width: 210px;
				}	
				.item-detail{
					float: left
				}
			}
		}
		.image{
			
			border: 1px solid #f2f2f2;
			border-radius: 6px;
			overflow: hidden;
		}
		.itembox{
			box-shadow: none;
			border: none;
		}
		.imgwrap{
			position: relative;
			display: inline-block;
			margin-right: 10px;
		}
		.imgwrap:last-child{margin-right: 0;}
		.del{
			position: absolute;
			right: 6px;
			top: 6px;
			display: none;
		}
		.del:hover{cursor: pointer;}
		.imgwrap:hover .del{display: block;}
		
		.el-upload-list--picture-card .el-upload-list__item{
			width: 200px;
			height: 200px;
		}
		.el-upload--picture-card{
			width: 200px;
			height: 200px;
			line-height: 200px;
		}
	}
	
</style>